<template>
  <q-page class="cc-admin row scroll">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-form class="row items-center justify-start q-mb-md" ref="searchForm">
        <q-item class="col-xl-3 col-md-3 col-sm-6 col-xs-12">
          <q-item-section class="col-3 text-right cc-dyn-search-label">
            <q-item-label>用户：</q-item-label>
          </q-item-section>
          <q-item-section class="col row">
            <q-input dense debounce="500" hide-bottom-space outlined v-model="searchForm.userIdText" type="text" lazy-rules />
          </q-item-section>
        </q-item>
        <q-item class="col-md-3 col-sm-6 col-xs-12 items-center">
          <q-item-section>
            <div class="row justify-center">
              <q-btn unelevated no-wrap label="查询" color="primary" class="q-mx-xs" icon="search" :loading="loading" @click="query()">
                <template v-slot:loading>
                  <q-spinner-ios class="on-center" />
                </template>
              </q-btn>
              <q-btn outline no-wrap unelevated label="重置" class="q-mx-xs" color="primary" icon="refresh" @click="searchReset" />
            </div>
          </q-item-section>
        </q-item>
      </q-form>
      <q-table flat color="primary" class="cross_table" separator="cell" :columns="columns" :data="list" row-key="id" :pagination.sync="pagination"
        :visible-columns="group" @request="query" :rows-per-page-options="[10, 20, 50, 100]" :selection="mobile ? 'none' : 'multiple'" :selected.sync="selected"
        :hide-bottom="false">
        <template v-slot:top>
          <div class="row no-wrap full-width">
            <div class="text-subtitle">{{ title }}</div>
            <q-space />
            <div class="q-gutter-xs">
              <q-btn icon="add" no-wrap color="primary" label="新建" @click="add" v-auth="'e2a3d5a922a024c72d904d1272f2640f:add'" />
            </div>
          </div>
        </template>

        <template #body-cell-userIdText="props">
          <q-td key="userIdText" :props="props">
            <div :class="calcRowColor(props.row)">{{ props.row.userIdText }}</div>
          </q-td>
        </template>
        <template #body-cell-password="props">
          <q-td key="password" :props="props">
            <div :class="calcRowColor(props.row)">{{ props.row.password }}</div>
          </q-td>
        </template>
        <template #header-cell-opt="props">
          <q-th :props="props" :auto-width="true">{{ props.col.label }}</q-th>
        </template>
        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <cc-btn label="编辑" color="primary" icon="edit" @click="edit(props.row)"> <q-tooltip>编辑</q-tooltip></cc-btn>
            <cc-btn label="查看" color="info" icon="mdi-text-box-search-outline" @click="viewForm(props.row)"> <q-tooltip>查看</q-tooltip></cc-btn>
            <btn-del label="用户签字收集" @confirm="del(props.row)" v-auth="'e2a3d5a922a024c72d904d1272f2640f:delete'" />
          </q-td>
        </template>
      </q-table>
      <q-dialog :maximized="maximized" flat persistent ref="dialog">
        <q-form @submit="save" :class="dialogSize">
          <h5 class="view_title justify-between q-px-md">
            [用户签字收集]-{{ editType }}
            <q-btn dense outline round icon="clear" size="sm" v-close-popup />
          </h5>
          <q-scroll-area class="col">
            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <div class="col row">
                <div class="display-item col-6" v-if="showForm[101]">
                  <div class="dynamic-form-item">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />用户
                    </div>
                    <select-search dense debounce="500" hide-bottom-space outlined :options="userIdOptions" v-model="form.userId" type="select"
                      @blur="userIdBlur101" @input="userIdInput101(form.userId, form)" lazy-rules :rules="[requireTest]" :readonly="!editableForm[101]" emit-value
                      map-options />
                  </div>
                </div>
                <div class="display-item col-6" v-if="showForm[102]">
                  <div class="dynamic-form-item">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />签字密码(四位)
                    </div>
                    <q-input dense debounce="500" hide-bottom-space outlined v-model="form.password" type="password" @blur="passwordBlur102"
                      @input="passwordInput102(form.password, form)" lazy-rules :rules="[requireTest, val => val && val.length == 4 || '请输入四位']"
                      :readonly="!editableForm[102]" />
                  </div>
                </div>

                <div class="display-item col-6" v-if="showForm[102]">
                  <div class="dynamic-form-item col column">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />手签字
                    </div>
                    <div class="col column">
                      <sign-hand ref="sign" />
                    </div>
                  </div>
                </div>

                <div class="drawing-item col column"></div>
              </div>
            </div>
          </q-scroll-area>
          <div class="row justify-center q-pa-md">
            <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
            <q-btn class="q-mx-md" color="primary" icon="mdi-check-bold" label="提交" :loading="loading" type="submit" />
          </div>
        </q-form>
      </q-dialog>
      <q-dialog :maximized="maximized" flat persistent ref="viewDialog">
        <q-form @submit="save" :class="dialogSize">
          <h5 class="view_title justify-between q-px-md">
            [用户签字收集]-{{ editType }}
            <q-btn dense outline round icon="clear" size="sm" v-close-popup />
          </h5>
          <q-scroll-area class="col">
            <div class="row q-col-gutter-x-md dialog_form q-pa-md">
              <div class="col row">
                <div class="display-item col-6" v-if="showForm[101]">
                  <div class="dynamic-form-item">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />用户
                    </div>
                    <q-select dense debounce="500" hide-bottom-space outlined :options="userIdOptions" v-model="form.userId" type="select" @blur="userIdBlur101"
                      @input="userIdInput101(form.userId, form)" lazy-rules :rules="[requireTest]" readonly disable emit-value map-options />
                  </div>
                </div>
                <div class="display-item col-6" v-if="showForm[102]">
                  <div class="dynamic-form-item">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />签字密码(四位)
                    </div>
                    <q-input dense debounce="500" hide-bottom-space outlined v-model="form.password" type="password" @blur="passwordBlur102"
                      @input="passwordInput102(form.password, form)" lazy-rules :rules="[requireTest, val => val && val.length == 4 || '请输入四位']" readonly
                      disable />
                  </div>
                </div>
                <div class="display-item col-6" v-if="showForm[102]">
                  <div class="dynamic-form-item col column">
                    <div v-show="true" class="dynamic-form-item-label" style="width: 100%">
                      <q-icon name="star" color="red" v-show="true" />手签字
                    </div>
                    <div class="col column">
                      <div class="row justify-center">
                        <q-img :src="infoSignSrc" ref="sign" spinner-color="white" style="
                            width: 355px;
                            height: 125px;
                            border-style: outset;
                          " />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </q-scroll-area>
          <div class="row justify-center q-pa-md">
            <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
          </div>
        </q-form>
      </q-dialog>
    </div>
  </q-page>
</template>
<script>

// import { DynFormMixin } from 'boot/mixins/dynform';
import { IndexMixin } from 'boot/mixins';
import { debounce } from 'quasar';

export default {
  mixins: [IndexMixin],
  components: {
  },

  name: 'DynForm1661830046381',
  data() {
    return {
      mobile: false,
      maximized: false,
      dialogSize: 'dialog_card column',
      userIdOptions: [],
      userIdOptionData: [],
      form: {
        id: null,
        userId: null,
        userIdText: null,
        password: null,
      },
      // formId: 'e2a3d5a922a024c72d904d1272f2640f',
      autoLoadData: 'Y',
      title: '',
      // parentFormId: 'e2a3d5a922a024c72d904d1272f2640f',

      emptyForm: {
        id: null,
        userId: null,
        userIdText: null,
        password: null,
      },
      searchForm: {},
      showForm: {
        101: true,
        102: true,
      },
      editableForm: {
        101: true,
        102: true,
      },
      resetShowForm: {
        101: true,
        102: true,
      },
      columns: [{
        name: 'index',
        align: 'center',
        label: '序号',
        field: 'index',
        headerClasses: 'cc-table-index',
      }, {
        name: 'userIdText',
        align: 'center',
        label: '用户',
        field: 'userIdText',
        sortable: false,
      }, {
        name: 'opt',
        align: 'center',
        label: '操作',
        field: 'opt',
      }],
      url: {
        list: '/sys/usersign/list',
        add: '/sys/usersign/add',
        edit: '/sys/usersign/edit',
        delete: '/sys/usersign/delete',
        // deleteBatch: '/sys/user/deleteBatch',
        // exportXlsUrl: '/sys/user/exportXls',
        // importExcelUrl: '/sys/user/importExcel',
        // setUserRoles: '/sys/user/setUserRoles',
      },
      infoSignSrc: 'img/dyn/sign.png',
    };
  },
  methods: {
    userIdBlur101(evt) {

    },
    passwordBlur102(evt) {

    },
    userIdInput101(v, row, editAfter) {
      // 这里给名称字段赋值
      if (v instanceof Array) {
        const nameArray = [];
        this.form.userIdText = '';
        v.forEach((id) => {
          const opt = this.userIdOptions.find((o) => o.value === id);
          if (opt) {
            nameArray.push(opt.label);
          }
          this.form.userIdText = nameArray.join(',');
        });
      } else {
        const opt = this.userIdOptions.find((o) => o.value === v);
        this.form.userIdText = opt ? opt.label : '';
      }
    },
    passwordInput102(v, row, editAfter) {

    },

    // 逻辑表单设置
    logicInputSet() {
      this.showForm = {
        ...this.resetShowForm,
      };
    },

    initDict() {
      this.$axios.post('/sys/usersign/queryUserList').then(({
        result,
      }) => {
        if (result && result.length > 0) {
          this.userIdOptionData = result;
          this.userIdOptions = result.map((m) => ({
            label: m.realname,
            value: m.id,
          }));
          if (result.length === 1) {
            this.form.userId = this.userIdOptions[0].value;
            this.form.userIdText = this.userIdOptions[0].label;
          }
        } else {
          this.userIdOptionData = [];
          this.userIdOptions = [];
        }
      });
    },
    afterQuery() {

    },
    addBefore() {
      this.form = {
        parentId: this.parentId,
        catalog_id: this.catalog,
        ...this.emptyForm,
      };

      if (this.form.userId) {
        this.userIdInput101(this.form.userId);
      }

      return true;
    },
    saveBefore() {
      const img = this.$refs.sign.getImg();
      if (!img || !img.startsWith('data:image') || img.length < 200) {
        this.$error('请输入签名信息！');
        return false;
      }
      this.form.signBase64 = img;

      return true;
    },
    calcListForAdd() {

    },
    setSubFormListForEdit(result) {

    },
    editAfter() {
      // 只有编辑触发 为 true才进行触发
      if (this.form.userId) {
        this.userIdInput101(this.form.userId, {}, true);
      }
      this.$nextTick(() => {
        this.$refs.sign.setImg(this.form.signBase64);
      });
    },
    saveSubFormList() {

    },
    searchReset() {
      this.searchForm = {};
      this.resetSearchForm(this.$refs.searchForm);
      this.query();
    },
    calcRowColor(row) {
      return '';
    },
    viewForm(row) {
      this.form = row;
      this.infoSignSrc = row.signBase64;
      this.$refs.viewDialog.show();
    },
    requireTest(val) {
      return val === 0 || (val && ((`${val}`).length > 0)) || '这是必填字段';
    },
    save(callBack) {
      if (!this.saveBefore()) {
        return;
      }
      const isFlow = typeof callBack === 'function';
      let q;
      this.saveSubFormList();
      if (this.editType === '新建') {
        q = this.$axios.post(this.url.add, this.form);
      } else {
        q = this.$axios.put(this.url.edit, this.form);
      }
      return q.then((r) => {
        if (isFlow) {
          callBack(r);
        } else {
          this.$info(r.message);
          this.$refs.dialog.hide();
        }
      }).finally(() => {
        if (!isFlow) {
          this.query();
        }
      });
    },
    resetSearchForm(context) {
      const componentArray = [];
      this.findComponentDown(context, 'InputDatePicker', componentArray);
      componentArray.forEach((child) => {
        child.reset();
      });
    },
    findComponentDown(context, componentName, componentArray) {
      const children = context.$children;
      if (children && children.length > 0) {
        children.forEach((child) => {
          const { name } = child.$options;
          if (name === componentName) {
            componentArray.push(child);
          } else if (child.$children) {
            this.findComponentDown(child, componentName, componentArray);
          }
        });
      }
    },
  },
  mounted() {
    this.mobile = this.$q.platform.is.mobile;
    if (this.mobile) {
      this.dialogSize = 'dialog_full column';
      this.maximized = true;
    } else {
      this.dialogSize = 'dialog_card column';
      this.maximized = false;
    }
    // 当前工作流不存在 并且自动加载数据即可
    if (!this.currentProcess && this.autoLoadData === 'Y') {
      // 能否自动加载数据要看父表单是怎么约定的
      this.query();
      this.initDict();
    }
  },
  watch: {

  },
  computed: {

  },
};
</script>
<style></style>
